import React, { Component } from 'react'
//借用 React.createRef 创建对象
export default class App extends Component {
  //1. 为实例对象添加一个属性  『标识符要求』  字母数字下划线, 首字母不能为数字, 严格区分大小写, 且不能使用关键字
  input = React.createRef();
  box = React.createRef();

  render() {
    return (
      <div>
        {/* 2. 为虚拟 DOM 对象添加 ref 属性 */}
        <input type="text" ref={this.input} /><button onClick={this.show}>显示</button>
        <hr />
        <div ref={this.box} style={{width: '400px',height: '300px', border: 'solid 2px #520'}}></div>
      </div>
    )
  }

  show = (e) => {
    // 3. 获取真实 DOM 对象
    //current 当前的
    let v = this.input.current.value;
    //设置
    this.box.current.innerHTML = v;
  }

}

